<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作。
			---------------针对css3、添加、移除、切换的元素名”类名
			          addClass()        有参：1/多个参数
										语法：addClass("类名")
										<p class="类名">
										语法：addClass("类名")
										<p class="类名1 类名2 类名X" >
										功能：匹配元素集合中所有元素
										      添加一个或者多个类名操作
										理解：元素添加存在的样式
		    removeClass()               功能：匹配元素集合中所有元素
										      移除一个或者多个类名操作
			toggleClass()               功能：如果元素有类名则移除，无类名则添加
			hasClass()                  功能：检查匹配元素集合中是否包含指定类名
								    	返回值：bool
		 -->
		<!-- 要求：
		          1.jq引入
		          2.html：--div--      id="targetElement" 
							四个按钮    id="addClassBtn"
							           id="removeClassBtn"
									   id="toggleClassBtn"
									   id="hasClassBtn"
				             div  id="resultArea"
				 3.css:  .bgColor{  300*300  背景色随意}
						  .broders{ 10个像素实线红色边框  倒角画圆}
							 -->
	<script src="jquery-1.11.1(1).js"></script>
	<style>
			.bgColor{
			    width: 300px;
			    height: 300px;
			    background-color: #3c3fff;
			    
			}
			.broders{
				border: 10px solid #cc091d;
				border-radius: 50%; 
			}
			</style>
	</head>
	<body>
		<h1>元素类名操作</h1>
				
			<!-- html结构  4个按钮  2个空间 -->
			<div id="targetElement"></div>
			<button id="addClassBtn">添加类名</button>
			<button id="removeClassBtn">移除类名</button>
			<button id="toggleClassBtn">切换类名</button>
			<button id="hasClassBtn">判断存在与否类名</button>
			<div id="resultArea"></div>
			<script>
				// 1.点击 添加类名 按钮 添加效果【样式】，300*300 红色背景色
				$("#addClassBtn").click(function(){
					//div添加样式---存在样式：类名
					$("#targetElement").addClass("bgColor broders");
					$("#resultArea").html("<h4> 添加样式类名： </h4>");
				});
				// 2.点击 添加类名 按钮 添加效果【样式】，
				// 300*300 红色背景色 圆 外层10px黄色框
				// 1.点击 添加类名 按钮 添加效果【样式】，300*300 红色背景色
				$("#removeClassBtn").click(function(){
					$("#targetElement").removeClass("toggleClass broders");
					$("#resultArea").html("<h4> 移除样式类名bgColor bgColor broders</h4>")
				});
				//4.点击：切换类名 按钮 添加效果【样式】
				//5.去掉：
				// 300*300 红色背景色 圆 外层10px黄色框
				$("#toggleClassBtn").click(function(){
					$("#targetElement").toggleClass("bgColor");
					$("#resultArea").html("<h4> 切换样式类名broders</h4>")
				});
				//6.检查元素是否存在
					$("#hasClassBtn").click(function(){
					var hc=$("#targetElement").hasClass("broders");
					$("#resultArea").text("检查当前样式是否存在"+hc)
					});
			</script>
	</body>
</html>